<template>
	<view class="voice-record-component">
		<view v-if="isActive" class="voice-animation">
			<view v-for="(bar, index) in bars" :key="index" class="bar-container" :style="{ height: maxBarHeight + 'rpx' }">
				<view class="bar" :style="getBarStyle(bar, true)" />
				<view class="bar" :style="getBarStyle(bar, false)" />
			</view>
		</view>
		<view class="hint-text">{{ getHintText }}</view>
		<view
			class="voice-button"
			:style="{ backgroundColor: buttonBackColor }"
			@touchstart="startRecording"
			@touchmove="handleMove"
			@touchend="endRecording"
			@touchcancel="endRecording"
		>
			<text v-show="!isActive" class="button-text">按住说话</text>
			<view v-show="!isActive" class="button-icons">
				<image class="ic-img" src="/static/img/ai/key.png" mode="aspectFit" />
				<image class="ic-img" src="/static/img/ai/send.png" mode="aspectFit" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'voiceBotton',
	data() {
		return {
			isActive: false,
			isCanceling: false,
			bars: Array(26)
				.fill()
				.map(() => ({ height: 30 })),
			touchY: 0,
			maxMoveDistance: 60,
			animationInterval: null,
			// 最大条高度（rpx单位）
			maxBarHeight: 60
		};
	},
	computed: {
		buttonBackColor() {
			if (!this.isActive) return '#FFFFFF';
			return this.isCanceling ? '#E60B0B' : '#2469F2';
		},
		// 提示文字
		getHintText() {
			return this.isCanceling ? '松开取消' : this.isActive ? '松开发送，上滑取消' : '';
		},
		barColor() {
			return this.isCanceling ? '#E60B0B' : this.isActive ? '#2469F2' : '#e0e0e0';
		}
	},
	mounted() {
		this.generateBars();
	},
	methods: {
		// 获取条样式（支持镜像对称）
		getBarStyle(bar, isTop) {
			const realHeight = Math.max(5, Math.min(30, bar.height)) / 2; // 计算实际高度（中心线向两边延伸）
			return {
				height: realHeight + 'rpx',
				backgroundColor: this.barColor,
				// 上半部分底部圆角，下半部分顶部圆角
				borderRadius: isTop ? '4rpx 4rpx 0 0' : '0 0 4rpx 4rpx'
			};
		},
		// 开始录音
		async startRecording(event) {
			this.isActive = true;
			this.isCanceling = false;
			this.touchY = event.touches[0].clientY;
			// 开始动画
			if (this.animationInterval) clearInterval(this.animationInterval);
			this.animationInterval = setInterval(this.updateBars, 150);
			const ok = await getApp().initRecorder();
			if (ok) {
				getApp().startRecordTask();
			}
		},
		// 处理移动
		handleMove(event) {
			if (!this.isActive) return;
			const currentY = event.touches[0].clientY;
			const moveDistance = this.touchY - currentY;
			// 上滑超过阈值进入取消状态
			this.isCanceling = moveDistance > this.maxMoveDistance;
		},
		// 结束录音
		endRecording() {
			if (!this.isActive) return;
			getApp().stopRecordTask();
			getApp().releaseRecorder();
			this.resetState();
		},
		// 生成初始条（使用中心对称高度）
		generateBars() {
			this.bars = Array(26)
				.fill()
				.map(() => ({ height: Math.floor(Math.random() * 8) + 20 }));
		},
		// 更新动画条高度（镜像对称）
		updateBars() {
			if (!this.isActive) {
				clearInterval(this.animationInterval);
				return;
			}
			this.bars.forEach((bar) => {
				// 控制变化幅度在±5rpx内，限制在5-30rpx范围
				const change = Math.random() * 10 - 5;
				const newHeight = Math.max(5, Math.min(20, bar.height + change));
				bar.height = newHeight;
			});
		},

		// 重置状态
		resetState() {
			this.isActive = false;
			this.isCanceling = false;
			clearInterval(this.animationInterval); // 停止动画
			// 平滑重置条高度
			this.bars.forEach((bar) => {
				bar.height = 20;
			});
		}
	},
	beforeDestroy() {
		clearInterval(this.animationInterval);
	}
};
</script>

<style scoped>
.voice-record-component {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx 24rpx;
	z-index: 100;
}
.voice-animation {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	margin-bottom: 30rpx;
	gap: 8rpx;
}
.bar-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 8rpx;
	margin-right: 8rpx;
	height: 100%;
}
.bar {
	width: 100%;
	transition: height 0.2s ease, background-color 0.3s;
}
.hint-text {
	font-size: 28rpx;
	font-weight: 400;
	color: #575c66;
	text-align: center;
}
.voice-button {
	margin-top: 44rpx;
	position: relative;
	height: 112rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 4rpx 4rpx 16rpx 0 #001c5326;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	transition: all 0.3s ease;
}
.button-text {
	width: 100%;
	height: 112rpx;
	line-height: 112rpx;
	font-size: 32rpx;
	color: #2b2e33;
	text-align: center;
	font-weight: 600;
	transition: color 0.3s;
}
.button-icons {
	position: absolute;
	top: 0;
	width: 128rpx;
	right: 32rpx;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
}
.ic-img {
	width: 48rpx;
	height: 48rpx;
}
</style>
